<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<uni-icons type="back" size="30" color="#fff" @click="back" />
			<text class="title">注册</text>
			<view class="right-icons">
			</view>
		</view>
		<text class="t1">您好，</text>
		<text class="t2">欢迎注册车联网服务</text>
		<image src="/static/组 6.png" class="image1" />

		<view class="login-form">
			<view class="form-item">
				<view class="input-box">
					<input type="text" v-model="form.userName" placeholder="请输入用户名" />
				</view>
			</view>

			<view class="form-item">
				<view class="input-box">
					<input type="text" v-model="form.nickName" placeholder="输入昵称" />
				</view>
			</view>

			<view class="form-item">
				<view class="input-box">
					<input type="text" v-model="form.phone" placeholder="输入手机号" />
				</view>
			</view>

			<view class="form-item">
				<view class="input-box">
					<input type="text" v-model="form.email" placeholder="输入邮箱" />
				</view>
			</view>

			<view class="form-item">
				<view class="input-box">
					<input type="password" v-model="form.password" placeholder="输入密码" />
				</view>
			</view>

			<button class="login-btn" @click="register" :disabled="isRegist">注册</button>
		</view>
	</view>
</template>


<script>
	import request from '../../uitls/request';
	export default {
		data() {
			return {
				form: {
					userName: '',
					nickName: '',
					phone: '',
					email: '',
					password: ''
				},
				isRegist:false
			};
		},
		methods: {
			back(){
				uni.redirectTo({
					url:'/pages/yonghu1/Login/Login'
				})
			},
			register() {
				this.isRegist=true;
				const that = this;
				const {
					userName,
					nickName,
					phone,
					email,
					password
				} = this.form;

				if (!userName || !nickName || !phone || !email || !password) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					this.isRegist=false;
					return;
				}

				request({
					url: '/bigbase/info',
					method: 'POST',
					data: this.form,
					success: (res) => {
						console.log(res.data)
						if (res.data.code === 200) {
							uni.showToast({
								title: '注册成功',
								icon: 'success',
								duration: 2000,
								complete: () => { // Toast 显示完成后执行
									uni.redirectTo({
										url: '/pages/yonghu1/Login/Login'
									});
									that.isRegist = false;
								}
							});							
						} else {
							uni.showToast({
								title: res.data.msg || '注册失败',
								icon: 'none'
							});
							that.isRegist = false;
						}
					},
					fail: (err) => {
						console.error('请求失败', err);
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
						that.isRegist = false;
					}
				});
			}
		}
	};
</script>


<style lang="scss">
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.container {
		width: 750rpx;
		margin: 0 auto;
		overflow-x: hidden;
		height: 100vh;
		background-image: url("/static/组 8.png");
		background-repeat: no-repeat;
		background-size: auto 45%;
		position: relative;
		background-color: white;
	}

	.t1 {
		position: absolute;
		color: white;
		font-size: 28px;
		top: 80px;
		left: 30px;
	}

	.t2 {
		position: absolute;
		color: white;
		font-size: 20px;
		top: 120px;
		left: 30px;
	}

	.image1 {
		position: absolute;
		width: 400rpx;
		height: 350rpx;
		top: 150rpx;
		left: 73%;
		transform: translateX(-50%);
		z-index: 999;
	}

	.login-form {
		max-width: 100%;
		width: 100%;
		position: absolute;
		top: 200px;
		background-color: white;
		border-radius: 20px 20px 0 0;
		padding: 40px 20px 20px;

		.form-item {
			max-width: 100%;
			margin-bottom: 20px;

			.input-box {
				border-bottom: 3px solid #eee;
				padding: 10px 0;
				display: flex;

				input {
					width: 100%;
					height: 40px;
					font-size: 16px;
				}
			}
		}

		.login-btn {
			width: 100%;
			height: 44px;
			line-height: 44px;
			background-color: #2979ff;
			color: #fff;
			border-radius: 22px;
			font-size: 16px;
			margin-top: 40px;
		}
	}

	/* #ifdef MP-WEIXIN */
	.login-form {
		max-width: 90%;
		width: 90%;
		position: absolute;
		top: 200px;
		background-color: white;
		border-radius: 20px 20px 0 0;
		padding: 40px 20px 20px;

		.form-item {
			max-width: 100%;
			margin-bottom: 20px;

			.input-box {
				border-bottom: 3px solid #eee;
				padding: 10px 0;
				display: flex;

				input {
					width: 100%;
					height: 40px;
					font-size: 16px;
				}
			}
		}

		.login-btn {
			width: 100%;
			height: 44px;
			line-height: 44px;
			background-color: #2979ff;
			color: #fff;
			border-radius: 22px;
			font-size: 16px;
			margin-top: 40px;
		}
	}

	/* #endif */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 30rpx 20rpx 30rpx;
		color: #fff;
	}
	
	.title {
		font-size: 40rpx;
	}
	
	.right-icons {
		display: flex;
		gap: 20rpx;
		width: 45rpx;
	}
</style>